<template>
  <view class="comment-input-bar">
    <input
      class="comment-input"
      v-model="inputValue"
      :placeholder="placeholder"
      @input="onInput"
      @confirm="onSubmit"
      maxlength="200"
    />
    <button
      class="comment-submit"
      :class="{ active: inputValue.trim() }"
      @click="onSubmit"
    >
      发布
    </button>
  </view>
</template>

<script>
  export default {
    name: 'CommentInput',
    props: {
      placeholder: {
        type: String,
        default: '来都来了，说点什么呗~'
      }
    },
    data() {
      return {
        inputValue: ''
      }
    },
    methods: {
      onInput(e) {
        this.inputValue = e.detail.value
      },
      onSubmit() {
        if (!this.inputValue.trim()) return
        this.$emit('submit', this.inputValue.trim())
        this.inputValue = ''
      }
    }
  }
</script>

<style scoped lang="scss">
  .comment-input-bar {
    display: flex;
    align-items: center;
    padding: 16rpx 24rpx 32rpx 24rpx;
    background: #fff;
    position: sticky;
    bottom: 0;
    z-index: 10;
    box-shadow: 0rpx 7rpx 46rpx 0rpx rgba(0, 0, 0, 0.33);
  }
  .comment-input {
    width: 514rpx;
    height: 80rpx;
    background: #f2f2f2;
    border-radius: 40rpx;
    font-size: 28rpx;
    color: #333;
    padding-left: 32rpx;
    border: none;
    outline: none;
  }
  .comment-submit {
    width: 148rpx;
    height: 80rpx;
    background: #0c8d6a;
    border-radius: 40rpx;
    color: #fff;
    font-size: 28rpx;
    margin-left: 16rpx;
    border: none;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .comment-submit.active {
    opacity: 1;
  }
  .comment-submit:not(.active) {
    opacity: 0.5;
  }
</style>
